<template>
  <div class="container-fluid px-0 flex-shrink-0">
    <global-header :user='currentUser'></global-header>
    <router-view></router-view>
    <loader v-if="isLoading" text="拼命加载中"  background="rgba(0,0,0,.8)" />
  </div>
  <footer class="text-center py-4 text-secondary bg-light mt-auto">
    <small>
      <ul class="list-inline mb-0">
        <li class="list-inline-item">@2021 者也专栏</li>
        <li class="list-inline-item">文章</li>
        <li class="list-inline-item">联系</li>
        <li class="list-inline-item">更多</li>
      </ul>
    </small>
  </footer>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'
import { useStore } from 'vuex'
import GlobalHeader from '@/components/GlobalHeader.vue'
import Loader from '@/base/Loader.vue'
export default defineComponent({
  components: {
    GlobalHeader,
    Loader
  },
  setup () {
    // 使用vuex
    const store = useStore()
    const currentUser = computed(() => store.state.user)
    const isLoading = computed(() => store.state.loading)

    return {
      currentUser,
      isLoading
    }
  }
})
</script>
<style lang="scss">
</style>
